<template>
	<view>
		<!-- 头部header -->
		<view class="header">
			<uni-nav-bar :statusBar="true" leftIcon="arrowleft" fixed="true" title="相关资质" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<!--页面内容-->
		<view class="p-content s-container">
			<view>
				<!-- 食品经营许可证信息 -->
				<view class="s-container-li" v-if="hasLicenseList">
					<view class="relevant-container">
						<view class="title">
							<text class="title-text">食品经营许可证信息</text>
							<text class="title-normal" :class="computeStatus('style', licenseList.licenseInfoResultApiModel.status)">
								<text class="title-normal-text">
									{{computeStatus('text', licenseList.licenseInfoResultApiModel.status)}}
								</text>
							</text>
						</view>
						<view class="relevant-img-block">
							<!-- <swiper :options="swiperOption">
								<swiper-slide v-for="slide in licenseList.licenseInfoResultApiModel.fileId">
									<img class="images" :src="imgHeaderUrl + slide" alt="" @click="toFullSize(imgHeaderUrl + slide)">
								</swiper-slide>
							</swiper> -->
							<image class="images" :src="imgHeaderUrl + licenseList.licenseInfoResultApiModel.fileId[0]" mode=""></image>
							
						</view>
						<view class="certify-content">
							<view><text>许可证编号</text><text>{{licenseList.licenseInfoResultApiModel.licenseNo}}</text></view>
							<view><text>法定代表人</text><text>{{licenseList.licenseInfoResultApiModel.legalRepresentative }}</text></view>
							<view><text>主体业态</text><text>{{licenseList.licenseInfoResultApiModel.mainBusinessCn}}</text></view>
							<view><text>经营地址</text><text>{{licenseList.licenseInfoResultApiModel.address}}</text></view>
							<view><text>经营项目</text><text>{{licenseList.itemCn.join(',')}}</text></view>
							<view><text>有效期至</text><text>{{licenseList.licenseInfoResultApiModel.expireDate}}</text></view>
							<view><text>经营者名称</text><text v-html="licenseList.licenseInfoResultApiModel.businessName"></text></view>
						</view>
					</view>
				</view>
				<!-- 营业执照 -->
				<view class="s-container-li" v-if="hasLicenseList">
					<view class="relevant-container">
						<view class="title">
							<text class="title-text">营业执照</text>
							<text class="title-normal" :class="computeStatus('style', businessList.status)">
								<text class="title-normal-text">
									{{computeStatus('text', businessList.status)}}
								</text>
							</text>
						</view>
						<view class="relevant-img-block">
							<!-- <swiper :options="swiperOption">
								<swiper-slide v-for="slide in businessList.fileId">
									<img class="images" :src="imgHeaderUrl + slide" alt="" @click="toFullSize(imgHeaderUrl + slide)">
								</swiper-slide>
							</swiper> -->
							<image class="images" :src="imgHeaderUrl +  businessList.fileId[0]" mode=""></image>
							
						</view>
						<view class="certify-content">
							<view><text>统一社会信用代码</text><text>{{businessList.unifyingSocialCredit}}</text></view>
							<view><text>类型</text><text>{{businessList.codeTypeName}}</text></view>
							<view><text>住所</text><text>{{businessList.address}}</text></view>
							<view><text>法定代表人</text><text>{{businessList.legalRepresentative}}</text></view>
							<view><text>注册资本</text><text>{{businessList.registerValue}}</text></view>
							<view><text>成立日期</text><text>{{businessList.companyCreateDate }}</text></view>
							<view><text>营业期限</text><text>{{businessList.businessBegin }}至<br>{{businessList.businessEnd }}</text></view>
							<view><text>经营范围</text><text v-html="businessList.businessRegion"></text></view>
						</view>
					</view>
				</view>
				<!--  食品安全责任险信息 -->
				<view class="s-container-li" v-for="item in insuranceList" :key="item.insuranceNo">
					<view class="relevant-container" v-if="insuranceList.length > 0">
						<view class="title">
							<text class="title-text">{{item.insuranceName}}</text>
							<text class="title-normal" :class="computeStatus('style', item.status)">
								<text class="title-normal-text">
									{{computeStatus('text', item.status)}}
								</text>
							</text>
						</view>
						<view class="relevant-img-block">
							<!-- <swiper :options="swiperOption">
								<swiper-slide v-for="slide in item.fileId">
									<img class="images" :src="imgHeaderUrl + item.fileId[0]" alt="" @click="toFullSize(imgHeaderUrl + slide)">
								</swiper-slide>
							</swiper> -->
							<image style="padding: 0 60rpx" class="images" :src="imgHeaderUrl + item.fileId[0]" mode=""></image>
						</view>
						<view class="certify-content">
							<view><text>保单号</text><text>{{item.insuranceNo}}</text></view>
							<view><text>被保险人</text><text>{{item.insured}}</text></view>
							<!--                        <view><text>经营项目</text><text>{{item.item}}</text></view>-->
							<view><text>经营地址</text><text>{{item.address}}</text></view>
							<!--                        <view><text>保险金额</text><text>{{item.insuranceAmount}}</text></view>-->
							<view><text>保险期间</text><text>{{item.beginDate}}至<br>{{item.endDate}}止</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contractorId: '',
				insuranceList: {},
				swiperOption: {},
				imgHeaderUrl: uni.getStorageSync('imgServerHost') + ':' + uni.getStorageSync('imgServerPort') + '/img/',
				businessList: {},
				licenseList: {}

			}
		},
		computed: {
			hasLicenseList() {
				return !this.$utils.isEmptyObject(this.licenseList)
			},
			computeStatus() {
				return function(type, value) {
					let result = null
					let certifyStatus = ['title-expired', 'title-due', 'title-normal']
					let certifyName = ['已到期', '即将到期', '']
					if (type === 'style') {
						result = certifyStatus[value]
					} else if (type === 'text') {
						result = certifyName[value]
					} else {
						return
					}
					return result
				}
			}
		},
		onLoad(item) {
			this.contractorId = item.contractorId
			this.initPage()
		},
		methods: {
			initPage() {
				this.getLicenseInfoFunc()
				this.getBusinessLicenseDetails()
				this.getInsuranceInfoFunc()
			},
			/**
			 * @description: 获取营业执照信息
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-12-30 17:13
			 */
			getBusinessLicenseDetails() {
				let params = {
					orgId: this.contractorId
				}
				this.$request.ygstPcBusinessLicenseDetailsGet(params).then(res => {
					const data = res
					this.businessList = data
					console.log('获取营业执照信息', res)
				})
			},
			/**
			 * @description: 获取相关资证(获取食品安全责任保险单)
			 * @author: LinW
			 * @createDate: 2019-08-07 14:35
			 * @param: mod
			 * @return:
			 */
			getInsuranceInfoFunc() {
				let params = {
					orgId: this.contractorId
				}
				this.$request.getInsuranceInfo(params).then(res => {
					const data = res
					this.insuranceList = data
					console.log('获取食品安全责任保险单', res)
				})
			},
			/**
			 * @description: 获取食品经营许可证信息
			 * @author: LinW
			 * @createDate: 2019-08-07 14:14
			 * @param: mod
			 * @return:
			 */
			getLicenseInfoFunc() {
				let params = {
					orgId: this.contractorId
				}
				this.$request.getLicenseInfo(params).then(res => {
					const data = res
					this.licenseList = data
					console.log('获取食品经营许可证信息', res)
				})
			},
			/**
			 * @description: 返回上一页
			 * @author: LinW (xuebingchuan_20@163.com)
			 * @createDate: 2020-10-10 10:40
			 */
			clickLeft() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.s-container {
		.s-container-li:not(:last-child) {
			padding-bottom: 20rpx;
		}

		.s-container-li {
			background-color: #CCCCCC;

			.relevant-container {
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				padding-top: 36rpx;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0px;
				}

				.title {
					display: flex;
					align-items: center;
					padding: 0px 30rpx;
					align-self: flex-start;
					font-size: 30rpx;
					color: #2B2B2B;
					width: 500rpx;

					.title-text {
						display: table-cell;
						vertical-align: middle;
						padding-right: 40rpx;
						display: flex;
						align-items: center;
					}

					&-expired {
						border: 1px solid #FF5A59;
						color: #FF5A59;
					}

					&-due {
						border: 1px solid #FC9C1E;
						color: #FC9C1E;
					}

					&-normal {
						display: table;
						width: 140rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						font-size: 30rpx;
						border-radius: 4rpx;

						.title-normal-text {
							display: table-cell;
							vertical-align: middle;
						}
					}
				}

				.relevant-img-block {
					align-self: center;
					width: 320rpx;
					height: 240rpx;
					padding: 20rpx 0px 10rpx 0px;
					display: flex;
					justify-content: center;

					.images {
						width: 320rpx;
						height: 260rpx;
						object-fit: contain;
					}
				}

				.certify-content {
					overflow: hidden;
					word-break: break-all;
					align-self: flex-start;
					text-align: left;
					padding: 36rpx 44rpx;
					display: table;
					font-size: 28rpx;
					line-height: 40rpx;

					&>view>text:nth-child(1) {
						width: 260rpx;
						color: #2B2B2B;
					}

					&>view>text:nth-child(2) {
						color: #C1C1C1;
					}

					&>view>text {
						display: table-cell;
					}
				}
			}
		}
	}
</style>
